import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import moment from "moment";
import { ConfigProvider } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import {
  HashRouter as Router,
  Redirect,
  Route,
  Switch,
} from "react-router-dom";

moment.locale("zh-cn");

const HelloPage = React.lazy(
  () => import(/*webpackChunkName:"hello.page"*/ "@/hello")
);

const ListPage = React.lazy(() => import("@/list"));

const DetailPage = React.lazy(() => import("@/detail"));

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <Router>
      <Suspense fallback={<div>loading</div>}>
        <Switch>
          <Route path="/" exact>
            <Redirect to="/list" />
          </Route>
          <Route path="/hello">
            <HelloPage />
          </Route>
          <Route path="/test">
            <div>xxx</div>
          </Route>
          <Route path="/list/:pageIndex?">
            <ListPage />
          </Route>
          <Route path="/detail/:id">
            <DetailPage />
          </Route>
          <Route
            path="/help"
            render={(props) => {
              console.log(props);
              return <div>帮助文档</div>;
            }}
          />
        </Switch>
      </Suspense>
    </Router>
  </ConfigProvider>,
  document.getElementById("app")
);
